<template>
    <div class="roleInfor">
        <div class="roleTree">
            <div class="roleTree_top">
                <el-tooltip class="item" effect="dark" :content="$t('message.add')" placement="top">
                    <el-button type="primary" @click="handleAddRole()" icon="iconfont icon-xinzeng-wubiankuang"></el-button>
                </el-tooltip>
                <el-form class="searchForm" :inline="true" :model="searchRoleForm" ref="searchForm" :label-width="labelWidth">
                    <el-form-item prop="Name">
                        <el-input v-model="searchRoleForm.Name" clearable :placeholder="$t('message.pleaseEnterName')"></el-input>
                        <el-button @click="search('searchRoleForm')" icon="iconfont icon-sousuo"></el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="roleTree_lists">
                <div class="roleTree_list" v-bind:class="{cur: curIndex === index}" v-for="(tree, index) in trees" :key="index">
                    <div class="role_name" @click="showMore(index)">{{tree.roleName}}</div>
                    <div class="tree_btn" v-show="curIndex === index">
                        <el-tooltip class="item" effect="dark" :content="$t('message.edit')" placement="top">
                            <el-button type="primary" @click="editRole()" icon="iconfont icon-bianji-kong"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" :content="$t('message.del')" placement="top">
                            <el-button type="info" @click="delRole(tree.roleId)" icon="iconfont icon-shanchu-kong"></el-button>
                        </el-tooltip>
                    </div>
                </div>
            </div>
        </div>
        <div class="roleTable">
            <div class="roleTable_top">
                <span class="title">{{$t('message.rolePerson')}}</span>
                <el-form class="searchForm" :inline="true" :model="searchForm" ref="searchForm" :label-width="labelWidth">
                    <el-form-item prop="Name">
                        <el-input v-model="searchForm.Name" clearable :placeholder="$t('message.enterMores')"></el-input>
                        <el-button @click="search('searchForm')" icon="iconfont icon-sousuo"></el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="roleTable_main">
                <div class="roleTable_btn">
                    <el-tooltip class="item" effect="dark" :content="$t('message.add')" placement="top">
                        <el-button type="primary" @click="handleAddUser()" icon="iconfont icon-xinzeng-wubiankuang"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" :content="$t('message.del')" placement="top">
                        <el-button type="info" @click="handleDelete()" icon="iconfont icon-shanchu-kong"></el-button>
                    </el-tooltip>
                </div>
                <div class="roleTable_table">
                    <el-table
                        ref="multipleTable"
                        :data="tableData"
                        :row-key="row => row.index"
                        style="width: 100%;"
                        class="tableStyle"
                        @selection-change="handleSelectionChange"
                        :header-cell-style="{
                        'background-color': '#f8f8f9',
                    }"
                        :height="tableHeight"
                        :max-height="tableHeight">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column :label="$t('message.employeeCode')" prop="EmployeeCode"></el-table-column>
                        <el-table-column :label="$t('message.employeeName')" prop="EmployeeName"></el-table-column>
                        <el-table-column :label="$t('message.department')" prop="Department"></el-table-column>
                        <el-table-column :label="$t('message.position')" prop="Position"></el-table-column>
                    </el-table>
                    <div class="Pagination">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 30, 40]"  :page-size="PageSize" layout="total, prev, pager, next,sizes"
                            :total="count">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog :title="addTitle" :visible.sync="dialogAddRoleVisible"  width="630px" :close-on-click-modal='false'>
            <el-form :model="addRoleForm" :rules="roleRules" ref="addRoleForm" :label-width="labelWidth">
                <el-form-item :label="$t('message.roleName')" prop="RoleName" class="w100">
                    <el-select clearable v-model="addRoleForm.RoleName" :placeholder="$t('message.pleaseSelectRoleName')">
                        <el-option v-for="(item, index) in roleNames" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('message.bindingMenu')" prop="BindingMenu" class="w100">
                    <div class="role_main" v-bind:class="{isError: isError}">
                        <el-tree
                            :data="treeData"
                            show-checkbox
                            node-key="id"
                            ref="tree"
                            default-expand-all
                            :props="defaultProps">
                        </el-tree>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-tooltip class="item" effect="dark" :content="$t('message.save')" placement="top">
                    <el-button type="primary" @click="addRole('addRoleForm')" icon="iconfont icon-gou-wukuang"></el-button>
                </el-tooltip>
            </div>
        </el-dialog>
        <el-dialog :title="$t('message.addPeople')" :visible.sync="dialogAddUserVisible"  width="1180px" :close-on-click-modal='false'>
            <el-form :model="userForm" ref="userForm" :inline="true">
                <el-form-item :label="$t('message.employeeCode')" prop="EmployeeCode" :label-width="nameW">
                    <el-input clearable v-model="userForm.EmployeeCode" :placeholder="$t('message.pleaseEnterEmployeeCode')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('message.employeeName')" prop="EmployeeName" :label-width="nameW">
                    <el-input clearable v-model="userForm.EmployeeName" :placeholder="$t('message.pleaseEnterEmployeeName')"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-tooltip class="item" effect="dark" :content="$t('message.search')" placement="top">
                        <el-button type="primary" @click="searchUserForm('userForm')" icon="iconfont icon-sousuo"></el-button>
                    </el-tooltip>
                </el-form-item>
            </el-form>
            <div class="user_main">
                <div class="user_select">
                    <el-table
                        ref="multipleSelect"
                        :data="selectData"
                        :row-key="row => row.index"
                        style="width: 100%;"
                        class="tableStyle"
                        @selection-change="handleSelectionChange1"
                        :header-cell-style="{
                            'background-color': '#f8f8f9',
                        }">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column :label="$t('message.employeeCode')" prop="EmployeeCode"></el-table-column>
                        <el-table-column :label="$t('message.employeeName')" prop="EmployeeName"></el-table-column>
                        <el-table-column :label="$t('message.department')" prop="Department"></el-table-column>
                        <el-table-column :label="$t('message.position')" prop="Position"></el-table-column>
                        <el-table-column :label="$t('message.company')" prop="Company"></el-table-column>
                    </el-table>
                    <div class="Pagination">
                        <el-pagination
                            @size-change="handleSizeChange1"
                            @current-change="handleCurrentChange1"
                            :current-page="currentPage1"
                            :page-sizes="[10, 20, 30, 40]"  :page-size="PageSize1" layout="total, prev, pager, next,sizes"
                            :total="count1">
                        </el-pagination>
                    </div>
                </div>
                <div class="user_transfer">
                    <el-tooltip class="item" effect="dark" :content="$t('message.remove')" placement="top">
                        <el-button @click="removeUser()" icon="iconfont icon-zuo" circle :disabled="canRemove"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" :content="$t('message.append')" placement="top">
                        <el-button @click="appendUser()" icon="iconfont icon-you" circle :disabled="canAppend"></el-button>
                    </el-tooltip>
                </div>
                <div class="user_selected">
                    <el-table
                        ref="multipleSelected"
                        :data="selectedData"
                        :row-key="row => row.index"
                        style="width: 100%;"
                        class="tableStyle"
                        @selection-change="handleSelectionChange2"
                        :header-cell-style="{
                            'background-color': '#f8f8f9',
                        }">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column :label="$t('message.employeeCode')" prop="EmployeeCode"></el-table-column>
                        <el-table-column :label="$t('message.employeeName')" prop="EmployeeName"></el-table-column>
                        <el-table-column :label="$t('message.department')" prop="Department"></el-table-column>
                        <el-table-column :label="$t('message.position')" prop="Position"></el-table-column>
                        <el-table-column :label="$t('message.company')" prop="Company"></el-table-column>
                    </el-table>
                    <div class="Pagination">
                        <el-pagination
                            @size-change="handleSizeChange2"
                            @current-change="handleCurrentChange2"
                            :current-page="currentPage2"
                            :page-sizes="[10, 20, 30, 40]"  :page-size="PageSize2" layout="total, prev, pager, next,sizes"
                            :total="count2">
                        </el-pagination>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-tooltip class="item" effect="dark" :content="$t('message.save')" placement="top">
                    <el-button type="primary" @click="saveUser()" icon="iconfont icon-gou-wukuang"></el-button>
                </el-tooltip>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { baseUrl, baseImgPath } from "@/config/env";
    import { getStore, getLocal } from "../../config/mUtils"
    export default {
        name: "role",
        data() {
            let checkTree = (rule, value, callback) => {
                if (this.$refs.tree.getCheckedNodes().length > 0) {
                    this.isError = false;
                    callback();
                } else {
                    this.isError = true;
                    callback(new Error(this.$t('message.pleaseSelectBindingMenu')));
                }
            };
            return {
                baseUrl,
                baseImgPath,
                searchRoleForm: {
                    Name: ''
                },
                searchForm: {
                    Name: ''
                },
                curIndex: 0,
                addTitle: this.$t('message.addRole'),
                trees: [
                    {
                        roleId: '001',
                        roleName: '超级管理员'
                    },
                    {
                        roleId: '002',
                        roleName: '普通用户'
                    },
                    {
                        roleId: '003',
                        roleName: '财务部'
                    },
                ],
                PageIndex: 1,
                PageIndex1: 1,
                PageIndex2: 1,
                PageSize: 10,
                PageSize1: 10,
                PageSize2: 10,
                count: 2,
                count1: 2,
                count2: 1,
                labelWidth: 0 + 'px',
                isError: false,
                canRemove: true,
                canAppend: true,
                tableData: [
                    {
                        EmployeeCode: 'SSPC0000001',
                        EmployeeName: '李明',
                        Department: '行政部',
                        Position: '部门经理'
                    }, {
                        EmployeeCode: 'SSPC0000002',
                        EmployeeName: '张菲',
                        Department: '财务部',
                        Position: '部门经理'
                    }
                ],
                selectData: [
                    {
                        EmployeeCode: 'SSPC0000001',
                        EmployeeName: '韩治军',
                        Department: '行政部',
                        Position: '部门经理',
                        Company: 'BFP-S&M'
                    }, {
                        EmployeeCode: 'SSPC0000002',
                        EmployeeName: '丁敏',
                        Department: '财务部',
                        Position: '部门经理',
                        Company: 'SSPC'
                    }
                ],
                selectedData: [
                    {
                        EmployeeCode: 'SSPC0000003',
                        EmployeeName: '杨杰',
                        Department: '行政部',
                        Position: '部门经理',
                        Company: 'SSPC'
                    }
                ],
                currentPage: 1,
                currentPage1: 1,
                currentPage2: 1,
                tableHeight: 0 + 'px',
                multipleSelection: [],
                multipleSelect: [],
                multipleSelected: [],
                dialogAddRoleVisible: false,
                nameW: 0 + 'px',
                roleNames: [
                    {
                        label: '角色1',
                        value: 0
                    }, {
                        label: '角色2',
                        value: 1
                    }
                ],
                addRoleForm: {
                    RoleName: '',
                    BindingMenu: ''
                },
                roleRules: {
                    RoleName: [{ required: true, message: this.$t('message.pleaseSelectRoleName'), trigger: "change" }],
                    BindingMenu: [{ required: true, validator: checkTree, trigger: "change" }]
                },
                userForm: {
                    EmployeeCode: '',
                    EmployeeName: ''
                },
                treeData: [
                    {
                        id: 1,
                        label: '申请列表',
                        children: [{
                            id: 4,
                            label: '申请列表',
                            children: [{
                                id: 5,
                                label: '新增'
                            }, {
                                id: 6,
                                label: '删除'
                            }, {
                                id: 7,
                                label: '编辑'
                            }, {
                                id: 8,
                                label: '导出'
                            }]
                        }]
                    }, {
                        id: 2,
                        label: '系统配置',
                        children: [{
                            id: 9,
                            label: '业务系统管理',
                            children: []
                        }]
                    }
                ],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                dialogAddUserVisible: false
            };
        },
        computed: {},
        created() {
            this.watchHeight();
            // this.initData();
            this.resetLabelWidth();
        },
        mounted() {
            setTimeout(() => {
                let widowHeight = document.documentElement.clientHeight-355;
                this.tableHeight = widowHeight;
            }, 1);
        },
        methods: {
            watchHeight() {
                setTimeout(() => {
                    const that = this;
                    window.onresize = function temp() {
                        let widowHeight = document.documentElement.clientHeight-355;
                        that.tableHeight = widowHeight;
                    };
                }, 1);
            },
            resetLabelWidth() {
                if (getLocal('language') === 'en_US') {
                    this.nameW = 110 + 'px';
                    this.labelWidth = 100 + 'px';
                } else {
                    this.nameW = 75 + 'px';
                    this.labelWidth = 70 + 'px';
                }
            },
            async initData() {
                /**获取用户列表 */
                try {
                    this.getLanguageResource();
                    this.getSystemList();
                } catch (err) {
                    console.log("获取数据失败", err);
                }
            },
            showMore(index) {
                this.curIndex = index;
            },
            handleSizeChange(val) {
                this.currentPage = 1;
                this.PageIndex = 1;
                this.PageSize = val;
                this.getSystemList();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.PageIndex = val;
                this.getSystemList();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange1(val) {
                this.currentPage1 = 1;
                this.PageIndex1 = 1;
                this.PageSize1 = val;
                this.getSystemList();
            },
            handleCurrentChange1(val) {
                this.currentPage1 = val;
                this.PageIndex1 = val;
                this.getSystemList();
            },
            handleSelectionChange1(val) {
                console.log(val.length);
                this.multipleSelect = val;
                if (val.length > 0) {
                    this.canAppend = false;
                } else {
                    this.canAppend = true;
                }
            },
            handleSizeChange2(val) {
                this.currentPage2 = 1;
                this.PageIndex2 = 1;
                this.PageSize2 = val;
                this.getSystemList();
            },
            handleCurrentChange2(val) {
                this.currentPage2 = val;
                this.PageIndex2 = val;
                this.getSystemList();
            },
            handleSelectionChange2(val) {
                console.log(val.length);
                this.multipleSelected = val;
                if (val.length > 0) {
                    this.canRemove = false;
                } else {
                    this.canRemove = true;
                }
            },
            handleAddRole() {
                this.dialogAddRoleVisible = true;
                this.addTitle = this.$t('message.addRole');
                this.addRoleForm.RoleName = '';
                this.$nextTick(() => {
                    this.$refs['addRoleForm'].clearValidate();
                    this.isError = false;
                });
                this.$refs.tree.setCheckedKeys([]);
            },
            addRole(formName) {
                this.$refs[formName].validate(async valid => {
                    if (valid) {
                        this.dialogAddRoleVisible = false;
                    } else {
                        return false;
                    }
                });
            },
            editRole() {
                this.dialogAddRoleVisible = true;
                this.addTitle = this.$t('message.editRole');
            },
            delRole() {
                this.$confirm(this.$t('message.isDel'), 'Warning', {
                    confirmButtonText: ' ',
                    cancelButtonText: ' ',
                    confirmButtonClass: 'iconfont icon-gou-wukuang',
                    cancelButtonClass: 'iconfont icon-guanbi-wukuang',
                    type: 'warning'
                }).then(() => {
                }).catch(() => {
                });
            },
            handleAddUser() {
                this.dialogAddUserVisible = true;
            },
            handleDelete(index, row) {
                if (this.multipleSelection.length > 0) {
                    this.$confirm(this.$t('message.isDel'), 'Warning', {
                        confirmButtonText: ' ',
                        cancelButtonText: ' ',
                        confirmButtonClass: 'iconfont icon-gou-wukuang',
                        cancelButtonClass: 'iconfont icon-guanbi-wukuang',
                        type: 'warning'
                    }).then(() => {
                    }).catch(() => {
                    });
                } else {
                    this.$message({
                        type: "warning",
                        message: this.$t('message.selectDelData')
                    });
                }
            },
            searchUserForm(formName) {
                this.getApplicationList();
            },
            removeUser() {},
            appendUser() {}
        }
    }
</script>

<style scoped>

</style>
